<template>
	<view class="container">
		<zgj-segmented-control :current="current" :values="tabs" style-type="text" active-color="#2ead7a"
			@clickItem="onClickTab" />
		<uni-list :border="false">
			<uni-list-item class="oitem" v-for="item of list" :key="item.id" direction="column"
				:to="'/uni_modules/zgj-pages/pages/orders/partorderinfo?id='+item.id">
				<template v-slot:header>
					<view class="zgj-row ord-lst-title uni-pb-3" style="align-items: center;">
						<text>单号：{{item.sn}}</text>
						<text class="sts" v-if="item.pay_state===1">{{item.state|orderState}}</text>
						<button v-else :disabled="!payPrepared" size="mini" type="primary" style="margin: 0;"
							@tap.stop="payOrder(item)">立即支付</button>
					</view>
				</template>
				<template v-slot:body>
					<view class="zgj-list-box">
						<view class="brand">
							<image :src="item.brand_logo" mode="aspectFit"></image>
						</view>
						<view class="uni-content">
							<view class="tip ">{{item.brand_name}}</view>
							<view class="tip uni-ellipsis-2">{{item.parts}}</view>
						</view>
					</view>
				</template>
				<template v-slot:footer>
					<view class="zgj-row" style="justify-content: space-between !important;">
						<view class="money">￥{{item.amount|money}}</view>
						<view class="otime">{{item.create_time}}</view>
					</view>
				</template>
			</uni-list-item>
			<uni-load-more :status="status"></uni-load-more>
		</uni-list>
		<uni-pay ref="pay" @success="paySuccess" @mounted="payMounted"></uni-pay>
	</view>
</template>

<script>
	import UniPay from '../../components/zgj-pay/zgj-pay.vue'
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	import ZgjSegmentedControl from '../../components/zgj-segmented-control/zgj-segmented-control.vue'
	export default {

		data() {
			return {
				current: 0,
				tabs: ['待支付', '已支付'],
				list: [],
				page: 1,
				size: 10,
				total: 0,
				loading: false,
				payPrepared:false
			};
		},
		components: {
			ZgjSegmentedControl,
			UniPay
		},
		computed: {
			userInfo() {
				return store.userInfo
			},
			status() {
				if (this.loading) return 'loading'
				if (this.page >= this.total) return 'noMore'
				return 'more'
			}
		},
		onLoad(e) {
			this.loadData()
		},
		methods: {
			onClickTab(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
				this.list = []
				this.page = 1
				this.total = 0
				this.loadData()
			},
			payMounted(){
				this.payPrepared=true
			},
			loadData() {
				this.list = []
				this.page = 1
				this.loadPage()
			},
			paySuccess(res) {
				console.log(res)
			},
			payOrder(order) {
				console.log("refs", this)
				console.log(this.$refs)
				this.$refs.pay.createOrder({
					provider: 'wxpay',
					total_fee: order.amount,
					order_no: order.sn,
					out_trade_no: `${order.sn}-1`,
					type: 'goods',
					description: order.brand_name + '配件'
				})
			},
			loadPage() {
				this.loading = true
				this.$http.get('/web/ai/orders', {
					user_id: this.userInfo._id,
					pay_state: this.current,
					page: this.page,
					size: this.size
				}, (resp) => {
					resp.items.forEach(ord => {
						ord.parts = ord.items.map(o => o.name).join(',')
					})
					this.loading = false
					this.total = resp.total_page
					this.page = resp.page
					this.list.push(...resp.items)
					uni.stopPullDownRefresh()
				}, () => {
					this.loading = false
					uni.stopPullDownRefresh()
				})
			},
			// #ifndef APP-NVUE
			onPullDownRefresh() {
				this.loadData()
			},
			onReachBottom() {
				console.log('reach bottom')
				//this.loadMore()
				if (this.total > this.page) {
					this.page++
					this.loadPage()
				}
			}
			// #endif
		}
	}
</script>

<style lang="scss">
	.oitem {
		border-bottom: 10px solid #f8f8f8;
		.money{
			font-size: 14px;
			color: $uni-color-warning;
		}
	}

	.ord-lst-title {
		justify-content: space-between !important;
		border-bottom: 1px solid $uni-border-color;
		font-size: 13px;
	}

	.zgj-list-box {
		.brand {
			height: 60px;
			width: 100px;

			image {
				width: 100%;
				height: 100%;
			}
		}

		padding: 10px 0;
		border-bottom: 1px solid $uni-border-color;
	}

	.otime {
		text-align: right;
		color: #666;
		font-size: 14px;
	}
</style>